<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <th:block th:include="include :: header('审核任务详情')"/>
    <link href="/css/layui.css" th:href="@{/css/layui.css}" rel="stylesheet">
</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="row col-sm-6">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs " style="background-color: #f8ac59;border-top-left-radius: 3px;
    border-top-right-radius: 3px;">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"><i
                            class="fa fa-calendar-check-o"></i>&nbsp;任务信息</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"><i
                            class="fa fa-user"></i>&nbsp;发布者信息</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active" th:object="${userTask}">
                        <input id="taskId" name="taskId" th:field="*{taskId}" type="hidden">
                        <div class="panel-body" style="height: 650px">
                            <ul class="list-group"
                                style="margin-top: 50px; list-style-type:none; margin-left: 50px;margin-right: 50px;">
                                <li class="list-group-item"><i class="fa fa-tasks"></i>
                                    <b class="font-noraml">任务名称：</b>
                                    <p class="pull-right">[[${userTask.taskName}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-phone"></i>
                                    <b class="font-noraml">手机号码：</b>
                                    <p class="pull-right">[[${userTask.phonenumber}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-address-book"></i>
                                    <b class="font-noraml">任务地址：</b>
                                    <p class="pull-right">[[${userTask.address}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-money"></i>
                                    <b class="font-noraml">赏金金额：</b>
                                    <p class="pull-right">[[${userTask.money}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-tags"></i>
                                    <b class="font-noraml">任务状态：</b>
                                    <!--<span class="status" th:text=""></span>-->
                                    <p class="pull-right">[[${@dict.getLabel('user_task_status',
                                        userTask.taskStatus)}]]</p>
                                </li>

                                <li class="list-group-item"><i class="fa fa-user"></i>
                                    <b class="font-noraml">创建人：</b>
                                    <p class="pull-right">[[${userTask.createBy}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-clock-o"></i>
                                    <b class="font-noraml">创建时间：</b>
                                    <p class="pull-right">[[${#dates.format(userTask.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</p>
                                </li>
                                <li class="list-group-item"><i class="fa fa-table"></i>
                                    <b class="font-noraml">任务描述：</b>
                                    <textarea type="text" class="form-control"
                                              style="width: 100%; height: 209px; margin-top: 10px"
                                              readonly unselectable="on">[[${userTask.taskDescription}]]</textarea>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body" style="height: 650px" th:object="${user}">
                            <div class="ibox-content">
                                <div class="text-center">
                                    <p class="user-info-head">
                                        <img class="img-circle img-lg"
                                             th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}">
                                    </p>
                                </div>
                                <ul class="list-group"
                                    style="margin-top: 50px; margin-left: 50px;margin-right: 50px;">
                                    <li class="list-group-item"><i class="fa fa-user"></i>
                                        <b class="font-noraml">登录名称：</b>
                                        <p class="pull-right">[[${user.loginName}]]</p>
                                    </li>
                                    <li class="list-group-item"><i class="fa fa-phone"></i>
                                        <b class="font-noraml">手机号码：</b>
                                        <p class="pull-right">[[${user.phonenumber}]]</p>
                                    </li>
                                    <li class="list-group-item" th:if="${user.dept?.deptName != null}"><i
                                            class="fa fa-group"></i>
                                        <b class="font-noraml">所属专业：</b>
                                        <p class="pull-right">[[${user.dept.deptName}]]</p>
                                    </li>
                                    <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                                        <b class="font-noraml">邮箱地址：</b>
                                        <p class="pull-right" th:title="${user.email}">
                                            [[${#strings.abbreviate(user.email, 16)}]]</p>
                                    </li>
                                    <li class="list-group-item"><i class="fa fa-calendar"></i>
                                        <b class="font-noraml">创建时间：</b>
                                        <p class="pull-right">[[${#dates.format(user.createTime, 'yyyy-MM-dd')}]]</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-info" id="checkOrder" style="width: 20%; float: right; margin-top: 10px"
                    onclick="checkTask()"> 审&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;核
            </button>
        </div>
    </div>
    <div class="row col-sm-6" style="float: right">
        <div class="col-sm-12">
            <div class="panel panel-p rimary">
                <div class="panel-heading">
                    <i class="fa fa-video-camera"></i>&nbsp;视频
                </div>
                <div class="panel-body" align="center">
                    <video controls="controls" style="width: 85% !important;"
                           th:src="(${#strings.isEmpty(userTask.taskVideos[0])}) ? @{/video/nyist.mp4} : @{${userTask.taskVideos[0].videoUrl}}">
                    </video>
                </div>
            </div>
        </div>
    </div>

    <div class="row col-sm-6" style="float: right">
        <div class="col-sm-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <i class="fa fa-photo"></i>&nbsp;图片
                </div>
                <div class="panel-body">
                    <div class="layui-carousel" id="picture">
                        <div carousel-item>
                            <div align="center" th:each="img:${userTask.taskPictures}">
                                <img th:src="${img.pictureUrl}" style="height: 100% !important;"/></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "task/usertask";
    var checkEnable = false;
    var taskStatus = [[${userTask.taskStatus}]];
    var taskId = $("#taskId").val();
    if (taskStatus == '0') {
        checkEnable = true;
    }

    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#picture'
            , width: '100%' //设置容器宽度
            , height: '229px'
            , arrow: 'hover' //始终显示箭头
            , indicator: 'inside'
        });
    });

    function checkTask() {
        if (!checkEnable) {
            $.modal.alertWarning("只有待审核状态才可以进行审核！");
            return;
        }
        layer.confirm("审核是否通过？", {
                icon: 3,
                title: "系统提示",
                btn: ['通过', '不通过']
            },
            function (index) {
                $.operate.post(
                    prefix + "/checkUserTask",
                    {
                        'taskId': taskId,
                        'taskStatus': 1
                    },
                    function (result) {
                        $.operate.successTabCallback(result)
                    }
                );
                layer.close(index);
            },
            function (index) {
                $.modal.open("请选择质检不通过原因", prefix + "/checkTaskNextFlow?taskId=" + taskId);
                layer.close(index);
            }
        );
    }
</script>
</body>
</html>